<!--
 * @Author: Li Zengkun
 * @Date: 2022-09-23 11:13:18
 * @LastEditors: Li Zengkun
 * @LastEditTime: 2022-09-26 10:00:12
 * @Description: 
-->
<template>
  <header>
    <span>
      <img class="logo" src="@/assets/img/common/juejin.cn.ico" alt="" />
      <span class="logo-title">吸土掘银</span>
    </span>
    <span>
      <el-input
        v-model="input3"
        placeholder="Please input"
        class="input-with-select"
      >
        <template #append>
          <el-button icon="Search" type="primary" class="search-btn" />
        </template>
      </el-input>
    </span>
    <span>
      <el-dropdown>
        <span class="el-dropdown-link">
          <el-avatar>{{ user.nickname }}</el-avatar>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
             <el-link :underline="false" :href="`/#/front-end/center/${id}`">
              <el-dropdown-item>个人中心</el-dropdown-item>
             </el-link>
            <el-dropdown-item>Action 2</el-dropdown-item>
            <el-dropdown-item>Action 3</el-dropdown-item>
            <el-dropdown-item disabled>Action 4</el-dropdown-item>
            <el-dropdown-item divided @click="loginOut"
              >退出登录</el-dropdown-item
            >
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </span>
  </header>
</template>
 
<script setup>
import { ref, reactive, computed } from "vue";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";

const store = useStore();
const router = useRouter();

const id = sessionStorage.id;
store.dispatch("User/getUser", id);
const user = computed(() => {
  return store.state.User.user;
});

const loginOut = () => {
  sessionStorage.clear();
  router.push("/user/login");
  ElMessage.success("退出成功");
};
</script>

<style lang='less' scoped>
header {
  overflow: hidden;
  border-bottom: 1px var(--el-color-info-light-7) solid;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 40px;
  .logo {
    vertical-align: middle;
    height: 30px;
    transform: rotate(180deg) translateY(4px);
  }
  .logo-title {
    margin-left: 10px;
    font-size: 22px;
  }
  .el-input {
    width: 200px;
    height: 38px;
    transition: all 0.3s ease-out;
    &:hover {
      width: 400px;
    }
  }
  .example-showcase .el-dropdown-link {
    cursor: pointer;
    color: var(--el-color-primary);
    display: flex;
    align-items: center;
    cursor: pointer;
  }
}
</style>

